<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="PlayerX">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <base target="_blank">
    <script src="./jquery.min.js"></script>
</head>

<body>
<div class="videocontainer">
    <br>mrtc://mudu.ns.4l.hk/HAILUO/pgm<br> publish url: <input type="text" id="pushurl" style="width:200px;height:20px;"
                                                               placeholder="mrtc://mudu.ns.4l.hk/HAILUO/pgm"/>
    <div id="localVideo" style="width:200px;height:200px;overflow:auto;"></div>
</div>
<button id="publish">publish</button>
<button id="unpublish">unpublish</button>
<br/>
------------------------------------------------------------
<br/>

<div class="videocontainer">
    player url: <input type="text" id="playurl" style="width:200px;height:20px;"
                       placeholder="mrtc://mudu.ns.4l.hk/HAILUO/pgm"/>
    <div id="remoteVideo" style="width:200px;height:200px;overflow:auto;"></div>
</div>
<button id="start">start</button>
<button id="stop">stop</button>

<script src="./dist/mrtc-web-sdk.js"></script>
<script type="text/javascript">
    console.log(window);
    var localVideo = document.getElementById('localVideo');
    var video = document.getElementById('remoteVideo');
    var player = Mrtc.setup(video);
    $('#start').click(function () {
        var playurl = $("#playurl").val();
        player.play(playurl);
    });

    $('#stop').click(function () {
        player.stop();
    });
    var publish = Mrtc.setup(localVideo);
    $('#publish').click(function () {
        var publishurl = $("#pushurl").val();
        publish.publish(publishurl);
    });

    $('#unpublish').click(function () {
        publish.unpublish();
    });
</script>
</body>

</html>